<template>
  <div class="container">
    <div class="sidebar">
      <h2>卫星列表</h2>
      <a-input-search v-model="searchQuery" placeholder="搜索卫星" @change="onSearchChange"> </a-input-search>
      <a-tree
        :data="filteredTreeData"
        :field-names="{ title: 'name', key: 'id', children: 'children' }"
        @click="getEchatsData"
      >
      </a-tree>
    </div>
    <div class="main-content">
      <div class="settings">
        <h2>特征分析设置</h2>
        <a-form @submit="onSubmit">
          <a-row>
            <a-col :span="8">
              <a-form-item label="选择参数">
                <a-select v-model="formData.parameter" placeholder="请选择参数">
                  <a-option value="param1">参数1</a-option>
                  <a-option value="param2">参数2</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="平滑方法">
                <a-select v-model="formData.smoothing" placeholder="请选择平滑方法">
                  <a-option value="method1">方法1</a-option>
                  <a-option value="method2">方法2</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="任务名称">
                <a-input v-model="formData.taskName" placeholder="请输入任务名称"> </a-input
              ></a-form-item>
            </a-col>
          </a-row>

          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="analysis">
        <h2>特征分析</h2>
        <div ref="chart" style="width: 100%; height: 400px"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
const searchQuery = ref('')
const treeData = ref([
  { id: 1, name: '卫星A', children: [{ id: 2, name: '子卫星A1' }] },
  { id: 3, name: '卫星B' }
])
const filteredTreeData = ref(treeData.value)

const formData = reactive({
  parameter: '',
  smoothing: '',
  taskName: ''
})

const chart = ref(null)

const onSearchChange = () => {
  if (searchQuery.value) {
    filteredTreeData.value = treeData.value.filter((node) => node.name.includes(searchQuery.value))
  } else {
    filteredTreeData.value = treeData.value
  }
}

const onSubmit = () => {
  // 模拟获取数据
  const data = [120, 200, 150, 80, 70, 110, 130]
  const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  const chartInstance = echarts.init(chart.value)
  chartInstance.setOption({
    xAxis: {
      type: 'category',
      data: categories
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data,
        type: 'line'
      }
    ]
  })
}
const getEchatsData = (ev) => {
  console.log(ev)
}

onMounted(() => {
  chart.value = document.querySelector('#chart')
})
</script>

<style>
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 250px;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}
h2 {
  text-align: center;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.settings {
  margin-bottom: 20px;
}

.analysis {
  flex: 1;
}
</style>
